<template>
  <!-- PC端导航 -->
  <nav class="nav-container">
    <div class="nav-content">
      <!-- PC端菜单 -->
      <div v-if="!isMobile" class="desktop-nav">
        <div class="nav-item" 
          v-for="item in mainMenus" 
          :key="item"
        >
          <span>{{ item.name }}</span>
          <!-- WOMEN下拉菜单 -->
          <div v-if="item === 'WOMEN'" class="mega-dropdown">
            <div class="mega-content">
              <div class="menu-columns">
                <div class="menu-column">
                  <h3>NEW</h3>
                  <a v-for="item in newMenu" :key="item" href="#">{{ item }}</a>
                </div>
                <div class="menu-column">
                  <h3>CLOTHING</h3>
                  <a v-for="item in clothingMenu" :key="item" href="#">{{ item }}</a>
                </div>
                <div class="menu-column">
                  <h3>SHOES</h3>
                  <a v-for="item in shoesMenu" :key="item" href="#">{{ item }}</a>
                </div>
                <div class="menu-column">
                  <h3>COLLECTIONS</h3>
                  <a v-for="item in collectionsMenu" :key="item" href="#">{{ item }}</a>
                  <h3 class="gift-card">GIFT CARD</h3>
                  <a href="#">E-GIFT CARD</a>
                </div>
                <div class="menu-column">
                  <h3>ACCESSORIES</h3>
                  <a v-for="item in accessoriesMenu" :key="item" href="#">{{ item }}</a>
                </div>
                <div class="featured-column">
                  <div class="featured-grid">
                    <div class="featured-item">
                      <img src="https://www.reiss.com/cms/resource/blob/962374/3f5868948acffd49eb9e5af4f009e551/ww-new-arrivals-data.jpg" alt="New Arrivals">
                      <span>NEW ARRIVALS</span>
                    </div>
                    <div class="featured-item">
                      <img src="https://www.reiss.com/cms/resource/blob/969926/32a9ef6ab66bb0baf7cdc1d67ffaaafb/ss25-data.png" alt="Spring Summer 25">
                      <span>SPRING SUMMER 25</span>
                    </div>
                    <div class="featured-item">
                      <img src="https://www.reiss.com/cms/resource/blob/962344/3659627e466e1e2d5dc4df551317f440/dresses-data.jpg" alt="Dresses">
                      <span>DRESSES</span>
                    </div>
                    <div class="featured-item">
                      <img src="https://www.reiss.com/cms/resource/blob/962376/882976252ca49168394eeed6d40ac6ef/ww-petite-data.jpg" alt="Petite">
                      <span>PETITE</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 移动端菜单按钮 -->
      <div v-else class="mobile-menu-trigger">
        <MenuOutlined @click="showDrawer" />
      </div>
    </div>

    <!-- 移动端抽屉菜单 -->
    <a-drawer
      placement="left"
      :visible="visible"
      @close="onClose"
      :width="300"
      class="mobile-drawer"
    >
      <a-menu
        mode="inline"
        v-model:selectedKeys="current"
        v-model:openKeys="openKeys"
      >
        <a-sub-menu key="women">
          <template #title>WOMEN</template>
          <a-menu-item-group title="NEW">
            <a-menu-item key="new-arrivals">NEW ARRIVALS</a-menu-item>
            <a-menu-item key="reiss-atelier">REISS ATELIER</a-menu-item>
            <a-menu-item key="artisanal">ARTISANAL</a-menu-item>
            <a-menu-item key="linen">LINEN</a-menu-item>
          </a-menu-item-group>
          <a-menu-item-group title="CLOTHING">
            <a-menu-item key="all-clothing">ALL CLOTHING</a-menu-item>
            <a-menu-item key="dresses">DRESSES</a-menu-item>
            <a-menu-item key="coats">COATS & JACKETS</a-menu-item>
            <a-menu-item key="knitwear">KNITWEAR & JUMPERS</a-menu-item>
          </a-menu-item-group>
        </a-sub-menu>

        <a-sub-menu key="men">
          <template #title>MEN</template>
          <a-menu-item key="men-new">NEW ARRIVALS</a-menu-item>
          <a-menu-item key="men-clothing">ALL CLOTHING</a-menu-item>
        </a-sub-menu>

        <a-sub-menu key="children">
          <template #title>CHILDREN</template>
          <a-menu-item key="children-new">NEW ARRIVALS</a-menu-item>
          <a-menu-item key="children-clothing">ALL CLOTHING</a-menu-item>
        </a-sub-menu>

        <a-menu-item key="outlet">OUTLET</a-menu-item>
        <a-menu-item key="stories">STORIES</a-menu-item>
      </a-menu>
    </a-drawer>
  </nav>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { MenuOutlined } from '@ant-design/icons-vue'

const current = ref<string[]>(['women'])
const openKeys = ref<string[]>(['women'])
const visible = ref<boolean>(false)
const isMobile = ref<boolean>(false)
const activeMenu = ref('')

const mainMenus = ['WOMEN', 'MEN', 'CHILDREN', 'OUTLET', 'STORIES']

const newMenu = ['NEW ARRIVALS', 'REISS ATELIER', 'ARTISANAL', 'LINEN']
const clothingMenu = [
  'ALL CLOTHING', 'DRESSES', 'COATS & JACKETS', 'KNITWEAR & JUMPERS',
  'TOPS & T-SHIRTS', 'TROUSERS', 'JEANS', 'PETITE', 'SUITS & TAILORING',
  'BLAZERS', 'JUMPSUITS & PLAYSUITS', 'SKIRTS', 'BLOUSES & SHIRTS',
  'LEATHER JACKETS', 'SWEATS, HOODIES & JOGGERS', 'SHORTS', 'SWIMWEAR',
  'NIGHTWEAR & LOUNGEWEAR'
]
const shoesMenu = ['ALL SHOES', 'BOOTS', 'HEELS', 'TRAINERS', 'FLATS', 'SANDALS']
const collectionsMenu = ['HOLIDAY', 'WEDDING', 'WORKWEAR', 'OCCASIONWEAR', 'GIFTS FOR HER']
const accessoriesMenu = [
  'ALL ACCESSORIES', 'BELTS', 'BAGS', 'JEWELLERY', 'HATS, GLOVES & SCARVES',
  'LINGERIE', 'SOCKS', 'FRAGRANCE'
]

// 检查是否为移动设备
const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768
}

// 显示抽屉
const showDrawer = () => {
  visible.value = true
}

// 关闭抽屉
const onClose = () => {
  visible.value = false
}

// 处理鼠标进入
const handleMouseEnter = (menu: string) => {
  activeMenu.value = menu
}

// 处理鼠标离开
const handleMouseLeave = () => {
  activeMenu.value = ''
}

// 监听窗口大小变化
onMounted(() => {
  checkMobile()
  window.addEventListener('resize', checkMobile)
})

onUnmounted(() => {
  window.removeEventListener('resize', checkMobile)
})
</script>

<style lang="scss" scoped>
.nav-container {
  width: 100%;
  background: #f5f5f5;
  border-bottom: 1px solid #f0f0f0;
  position: relative;

  .nav-content {
    // max-width: 1280px;
    margin: 0 auto;
    position: relative;
  }
}

.desktop-nav {
  display: flex;
  justify-content: center;
  gap: 183px;
  height: 44px;
  align-items: center;
  padding: 0 20px;

  @media (max-width: 1440px) {
    gap: 120px;
  }

  @media (max-width: 1200px) {
    gap: 80px;
  }

  @media (max-width: 1024px) {
    gap: 60px;
  }

  @media (max-width: 900px) {
    gap: 40px;
  }

  .nav-item {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
    padding: 15px 0;
    position: static;
    white-space: nowrap;

    &:hover {
      color: #000;
    }

    .mega-dropdown {
      position: absolute;
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      width: 100vw;
      top: 100%;
      background: #fff;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.2s ease;
      pointer-events: none;

      &:hover {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }

      .mega-content {
        max-width: 1280px;
        margin: 0 auto;
        padding: 40px 20px;
      }
    }

    &:hover .mega-dropdown {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
  }
}

.mega-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;

  .mega-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 20px;
  }

  .menu-columns {
    display: flex;
    gap: 30px;

    .menu-column {
      min-width: 160px;

      h3 {
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 15px;
        color: #000;

        &.gift-card {
          margin-top: 30px;
        }
      }

      a {
        display: block;
        font-size: 12px;
        color: #666;
        margin-bottom: 8px;
        text-decoration: none;

        &:hover {
          color: #000;
        }
      }
    }

    .featured-column {
      flex: 2;
      min-width: 400px;

      .featured-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;

        .featured-item {
          position: relative;
          aspect-ratio: 3/4;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          span {
            position: absolute;
            bottom: 10px;
            left: 10px;
            background: rgba(255, 255, 255, 0.9);
            padding: 5px 10px;
            font-size: 12px;
            font-weight: 500;
          }
        }
      }
    }
  }
}

// 保持原有的移动端样式
.mobile-menu-trigger {
  padding: 16px;
  font-size: 20px;
  cursor: pointer;
}

.mobile-drawer {
  :deep(.ant-drawer-body) {
    padding: 0;

    .ant-menu {
      border-right: none;

      .ant-menu-item, 
      .ant-menu-submenu-title {
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.5px;
      }

      .ant-menu-item-group-title {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style> 